<template>
	<view class="user-index__options">
		<view class="user-index__options-title"
		:class="{'user-index__options-settle':props.isSettle}"
		>
			{{props.moduleItem.title}}
			
			<view class="user-index__options-settle-btn" v-if="props.isSettle">
				入驻
			</view>
		</view>
		
		<view class="user-index__options-items flex">
			<view class="user-index__options-item flex-column"
			v-for="item in props.moduleItem.data"
			:key="item.id"
			>
				<image :src="item.icon" mode="aspectFill" class="user-index__options-item-icon"></image>
				<text class="user-index__options-item-text">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onMounted} from 'vue';
const props = defineProps({
	moduleItem:Object,
	isSettle:{
		type:Boolean,
		default:false
	}
})

onMounted(()=>{
	console.log(props.moduleItem)
})
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
	align-items: center;
}

.flex-column{
	display: flex;
	flex-direction: column;
}

.user-index__options{
	background-color: #fff;
	border-radius: 10px;
	&-title{
		height: 80rpx;
		line-height: 80rpx;
		font-weight: 700;
		border-bottom: 2rpx solid #f5f5f5;
		padding-left: 20rpx;
	}
	
	&-settle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-btn{
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-weight: 200;
			border: 2rpx solid #c6c6c6;
			border-radius: 5px;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
	}
	
	&-items{
		flex-wrap: wrap;
		width: 640rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	
	&-item{
		width: 160rpx;
		height: 150rpx;
		// text-align: center;
		justify-content: center;
		align-items: center;
		&-icon{
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 20rpx;
		}
		
		&-text{
			font-size: 28rpx;
			font-weight: 200;
		}
	}
}
</style>